<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuerey操作DOM</title>
	<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
			学习主体L:针对页面操作较多——————Dom
			JQuery操作DOM：理解：JQ框架改变页面内容效果
			js基础就可以直接学习，了解函数使用
			基础函数------事件源之后出现，事件源的语法塘中
			html（）      作用：增加一个元素，覆盖原有的html
			val（）       作用：针对input，实现修改文本框内容
			text（）      作用：修改文本内容
	-->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
			 div{
				 width: 200px;
				 height: 200px;
				 background: black;
			 }
		 </style>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure, voluptas? Maxime incidunt quia at sunt rerum eaque quibusdam? Totam tenetur saepe magnam magni expedita deleniti hic ipsum quas blanditiis assumenda.</p>
		
		<div style="width: 200px; height: 200px; background: #000;"></div>
		<h3>lorem</h3>
		
		<input type="button" value="按钮2" />
		<input type="text" />
		<script>
			$("button").click(function(){
				/* JQ操作D0M--html()函数使用*/
				$("p").html("<h1>]Q操作D0M-htm1函数使用</h1>")
			});
			/* 练习1：div.200*200.背最颜色:黑色，鼠标滑过之后，
			下面内容修改:<h3>提示，修改为黄颜色*/
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>");
			});
			
			/*练习2：按钮  文本框    点击按钮，文本框增加一行文本*/
			$("input[type='button']").click(function(){
				// alert()
				$("input[type='text']").val("文本框内容修改~")
			});
			/* 利用JQ操作DOM（页面效果）：
							1.元素内容制作 （3个函数）
							html（）
							val（）
							text（）
							2.属性操作（4个函数）
							attr（）
							removerAttr（）
							<input checked>
							prop（）
							removePeop（）
							3.样式类名操作（4个函数）
							.demo{属性：属性值。。。}
							addClass（）
							removeClass（）
							toggleClass（）
							hasClass（）
							4.元素样式操作（5个函数）
							css（）
							语法：css（“css属性”，"css属性值"）
							$("选择器")attr（）.addClass()
							插入和删除操作（7个函数）
							元素遍历操作（6个函数）
							JQ动画操作（7个函数）
						*/
		</script>
	</body>
</html>